<template>
  <div class="mouncon">
    <div class="table_con">
      <div class="table_top">
        <h2>济南市市中区山长制公示详情</h2>
        <span class="numbering">编号: {{mounDetail.mountain_no}}</span>
      </div>
      <div class="table_conten">
        <div class="tableten">
          <img src="../../assets/img/shan@2x.png" alt />
          <span>{{mounDetail.mountain_name}}</span>
          <span class="tab_right" @click="gotoMaps(mounDetail.mountain_name)">到这去</span>
        </div>
        <p class="position">{{mounDetail.location}}</p>
        <ul class="level">
          <li class="level_item" v-for="item in mounDetail.user" :key="item.id">
            <span>{{item.authorize | authorizetype}}</span>
            <span>{{item.name}}</span>
            <span v-if="item.authorize == 3">{{item.phone}}</span>
            <span v-else>{{item.job}}</span>
          </li>
        </ul>
        <div class="management">
          <div class="mana_top">
            <img src="../../assets/img/shan@2x.png" alt />
            <span>管理目标</span>
          </div>
          <div class="mana_con">
            <p class="zfinfo">{{mountainText}}</p>
            <div class="zfinfo_ewm">
              <img :src="qrcode.image" alt="">
              <span>{{qrcode.des}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSignPackage } from "api/home";
export default {
  name: "MounTable",
  props: {
    mounDetail: {
      type: Object,
      default: {},
    },
    mountainText:{
      type: String,
      default: ''
    },
    qrcode:{
      type: Object,
      default:{}
    }
  },
  data() {
    return {
      longitude: null,
      latitude: null,
    };
  },
  mounted(){
    this.gotoMap()
  },
  methods: {
    gotoMap() {
      this.winUrl = location.href;
      getSignPackage(this.winUrl).then((res) => {
        let that = this;
        if (res.code == 200) {
          // 配置 JS-SDK
          that.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.signPackage.appId, // 必填，公众号的唯一标识
            timestamp: res.data.signPackage.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.signPackage.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signPackage.signature, // 必填，签名
            jsApiList: ["scanQRCode", "getLocation"], // 必填，需要使用的JS接口列表
          });
          that.wx.ready(() => {
            that.wx.getLocation({
              type: "gcj02",
              success: function (res) {
                // latitude;  纬度，浮点数，范围为90 ~ -90
                // longitude;  经度，浮点数，范围为180 ~ -180。
                let lat = res.latitude;
                let lng = res.longitude;
                let x_PI = (3.14159265358979324 * 3000.0) / 180.0;
                let z =
                  Math.sqrt(lng * lng + lat * lat) +
                  0.00002 * Math.sin(lat * x_PI);
                let theta =
                  Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
                that.longitude = z * Math.cos(theta) + 0.0065;
                that.latitude = z * Math.sin(theta) + 0.006;
              },
            });
          });
        }
      });
    },
    // 点击前往百度
    gotoMaps(name){
        window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${this.latitude},${this.longitude}|name:我的位置&destination=${name}&mode=driving&region=济南&output=html&src=webapp.baidu.openAPIdemo`;
    }
  },
  filters: {
    authorizetype(type) {
      if (type == 1) {
        return "区级山长";
      } else if (type == 2) {
        return "街道级山长";
      } else {
        return "巡查员";
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    let u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.replace(to.fullPath);
    } else {
      next();
    }
  },
};
</script>

<style lang="less" scoped>
.mouncon {
  font-size: 16px;
  background: #fff;
  color: #fff;
  .table_con {
    border-radius: 15px 15px 10px 10px;
    box-shadow: 0px 0px 13px 0px rgba(164, 169, 167, 0.42);
    .table_top {
      padding: 28px 30px;
      height: 40px;
      background: url("../../assets/img/BG@2x.png") no-repeat;
      background-size: 100% 100%;
      h2 {
        margin-bottom: 10px;
        font-size: 20px;
        color: #fff;
      }
      .numbering {
        float: right;
      }
    }
    .table_conten {
      padding: 30px;
      padding-top: 0;
      .tableten {
        margin-bottom: 20px;
        height: 32px;
        line-height: 32px;
        color: #333;
        .tab_right{
          float: right;
          padding: 0 10px;
          color: #fff;
          border-radius: 10px;
          background: #3ac798;
        }
        img {
          margin-right: 28px;
          height: 80%;
          vertical-align: middle;
        }
      }
      .position {
        color: #5d5d5d;
        line-height: 26px;
      }
      .level {
        .level_item {
          margin: 10px 0;
          display: flex;
          height: 30px;
          color: #5d5d5d;
          text-align: center;
          line-height: 30px;
          span {
            flex: 1;
          }
          & span:nth-child(1) {
            color: #66d2ae;
            border-right: 1px solid #b3c4d9;
          }
        }
      }
      .management {
        .mana_top {
          margin-bottom: 20px;
          height: 32px;
          line-height: 32px;
          color: #333;
          img {
            margin-right: 28px;
            height: 80%;
            vertical-align: middle;
          }
        }
        .mana_con {
          display: flex;
          color: #5d5d5d;
          .zfinfo{
            width: 60%;
            font-size: 14px;
            line-height: 24px;
          }
          .zfinfo_ewm{
            width: 40%;
            text-align: center;
            font-size: 14px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .table_tit {
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #333;
      font-size: 14px;
      font-weight: 700;
    }
  }
}
</style>